/* Global reset & base typography */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background-color: #f4f6f8;
    color: #333;
}

header {
    background-color: #eeeeee;
    color: rgb(0, 0, 0);
    padding: 1px 0;
    text-align: left;
    font-size: 0.875rem;
    z-index: 9000;
}

nav{
    background-color: #cdcdcd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    z-index: 9000;
}

nav > button{
    background-color: #fdac20;
}



/* Main container */
.container {
    display: grid;
    grid-template-columns: 0.9fr 1.7fr 0.4fr;
    grid-template-rows: 0.5fr 1.6fr 0.9fr 1fr;
    width: 80%;
    height: 80%;
    margin: auto;
    gap: 12px;
}

/* Reusable panel styling */
.container > div {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Title */
.title {
    grid-area: 1 / 1 / 2 / 3;
    font-size: 1.6rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: white;
}
h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #ffffff;
}
h3 {
    margin:0rem;
    font-size: 1.2rem;
    font-weight: 300;
}

/* Edit panel */
.edit {
    grid-area: 1 / 3 / 2 / 4;
    text-align: center;
    font-weight: 500;
}

/* Picture panel */
.picture {
    grid-area: 2 / 1 / 3 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
    border-left: 4px solid #ffcd38;
}

/* Description */
.description {
    grid-area: 2 / 2 / 3 / 4;
    line-height: 1.5;
    border-left: 4px solid #ffc107;
}


/* Stock section */
.stock {display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "donut donut donut"
    "donut donut donut"
    "used free free";
  grid-area: 3 / 1 / 5 / 2;
  gap: 8px;
  border-left: 4px solid #ffc107;
}

/* Stock items */
.stock > div {
    background: #eef2ff;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-size: 0.9rem;
    
}

.donut {
    grid-area: donut;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.free { grid-area: free; }
.location { grid-area: location; }
.used { grid-area: used; }

/* Data section */
.data {display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "characteristics projects links"
    "characteristics projects links"
    "characteristics projects links";
  grid-area: 3 / 2 / 5 / 4;
    gap: 8px;
    border-left: 4px solid #ffc107;
}

/* Data cards */
.data > div {
    border-radius: 6px;
    padding: 10px;
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
}

.projects { grid-area: projects; }
.characteristics { grid-area: characteristics; }
.links { grid-area: links; }


/* Main container */
.containernewadd {
    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    grid-template-rows: 0.3fr 2.3fr 0.4fr;
    grid-template-areas:
        ". namebox ."
        ". databox ."
        ". savebox .";
    width: 80%;
    height: 80%;
    margin: auto;
    gap: 16px;
}

.autocomplete {
  position: relative;
}

.autocomplete-items {
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  position: absolute;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}


/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: rgb(255, 153, 0) !important; 
  color: #ffffff; 
}

/* Shared card styling */
.containernewadd > div,
.databox > div,
.stockbox > div,
.savebox > div {
    border-radius: 8px;
    padding: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Name */
.namebox {
    grid-area: namebox;
    font-size: 1.3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* Main data grid */
.databox {
    grid-area: databox;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.6fr 1.4fr 0.6fr 0.5fr;
    grid-template-areas:
        "typebox stockbox imagebox"
        "characteristicsbox stockbox imagebox"
        "characteristicsbox stockbox imagebox"
        "specsbox links links";
    gap: 12px;
}

/* Characteristics */
.characteristicsbox {
    grid-area: characteristicsbox;
    height:auto;
}

.characteristics_new_list {
    background-color: #a6a6a6;
}

/* Stock */
.stockbox {
  display: flex; 
  flex-direction: column;
  text-align: center;
  gap: 4px;
  grid-area: stockbox;
}

/* Stock inner boxes */
.freebox{
    background-color: #eef2ff;
    border-radius: 6px;
    padding: 10px;
    font-weight: 500;
    text-align: center;
}

.usedbox {
    background-color: #eef2ff;
    border-radius: 6px;
    padding: 10px;
    font-weight: 500;
    text-align: center;
}

.freebox {
    grid-area: freebox;
}

.usedbox {
    grid-area: usedbox;
}

/* Image */
.imagebox {
    grid-area: imagebox;
    align-items: center;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
    font-weight: 500;
}

/* Links */
.links {
    grid-area: links;
}

/* Location & Type */
.locationbox {
    grid-area: locationbox;
}

.specsbox {
    grid-area: specsbox;
}

.typebox {
    grid-area: typebox;
}

/* Save area */
.savebox {
    grid-area: savebox;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "autofill draftbox saverbox"
        "autofill draftbox saverbox"
        "autofill draftbox saverbox";
    gap: 12px;
    align-items: center;
}

/* Buttons areas */
.draftbox {
    background-color: #ffc107;
    grid-area: draftbox;
    display: flex;
}


.saverbox {
    grid-area: saverbox;
    display: flex;
}

.autofill {
    grid-area: autofill;
}


.containernewmuladd {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.5fr 1.5fr 0.4fr 1.5fr 0.5fr;
    grid-template-areas:
        ". file_input ."
        "spread spread spread"
        "import_settings import_settings import_settings"
        "import import import"
        "import_generate import_submit import_submit";
    width: 80%;
    height: 80%;
    margin: auto;
    gap: 16px;
}

/* Shared panel styling */
.containernewmuladd > div {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* File input */
.file_input {
    grid-area: file_input;
    align-items: center;
    justify-content: center;
}

/* Spreadsheet preview */
.spread {
    grid-area: spread;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

/* Import options */
.import {
    grid-area: import;
    display: grid;
    gap: 12px;
}


/* Action buttons */
.import_generate,
.import_submit {
    display: flex;
    align-items: center;
}

.import_generate {
    grid-area: import_generate;
    justify-content: flex-start;
}

.import_submit {
    grid-area: import_submit;
    justify-content: flex-end;
}

.import_settings {
    grid-area: import_settings;
    justify-content: flex-end;
}

/* Optional: button consistency */
.import_generate button,
.import_submit button {
    min-width: 140px;
}

table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  overflow-y: scroll;
}

td, th {
  border: 1px solid #ddd;
  padding: 4px;
}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: center;
  background-color: #ff9500;
  color: white;
}

.projectcontainer {
    display: grid;
    grid-template-columns: 0.2fr 2.6fr 0.2fr;
    grid-template-rows: 0.4fr 1.8fr 0.8fr;
    grid-template-areas:
        ". project_title ."
        ". project_data ."
        ". project_options .";
    width: 80%;
    height: 85%;
    margin: auto;
    gap: 16px;
}

/* Shared panel styling */
.projectcontainer > div,
.project_data > div,
.project_options > div {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Title */
.project_title {
    grid-area: project_title;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: white;
}

/* Data section */
.project_data {
    grid-area: project_data;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "project_revisions project_components project_components"
        "project_revisions project_components project_components"
        "project_newrevision project_newrevision project_newrevision";
    gap: 12px;
}

/* Individual sections */
.project_revisions {
    grid-area: project_revisions;
}

.project_revisions_list > button{
    width:100%;
}

.project_components {
    grid-area: project_components;
}

.project_newrevision {
    grid-area: project_newrevision;
    display: flex;
    flex-direction: column;
}

/* Options section */
.project_options {
    grid-area: project_options;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "project_order project_build project_misc"
        "project_order project_build project_misc"
        "project_order project_build project_misc";
    gap: 12px;
}

/* Option panels */
.project_build{
    display: flex;
    flex-direction: column;
    grid-area: project_build;
}
.project_order{
    display: flex;
    flex-direction: column;
    grid-area: project_order;
}
.project_misc {
    display: flex;
    flex-direction: column;
    grid-area: project_misc;
}

.newprojectcontainer {
    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    grid-template-rows: 0.4fr 1.6fr 1fr;
    grid-template-areas:
        ". newprojectheaderinfo ."
        ". newprojectcomponents ."
        ". newprojectoptions .";
    width: 80%;
    height: 85%;
    margin: auto;
    gap: 16px;
}

/* Shared panel styling */
.newprojectcontainer > div,
.newprojectheaderinfo > div,
.newprojectcomponents > div,
.newprojectoptions > div {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ---------- HEADER ---------- */

.newprojectheaderinfo {
    grid-area: newprojectheaderinfo;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "newprojectname newprojectclient";
    gap: 12px;
}

/* Name field */
.newprojectname {
    grid-area: newprojectname;
    display: flex;
    flex-direction: column;
    
    font-size: 1.4rem;
    font-weight: 600;
}

/* Client field */
.newprojectclient {
    grid-area: newprojectclient;
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    font-weight: 600;
}

/* ---------- COMPONENTS ---------- */

.newprojectcomponents {
    grid-area: newprojectcomponents;
    display: grid;
    grid-template-rows: 2fr 1fr;
    grid-template-areas:
        "newcomponentslist"
        "newcomponentslist";
    gap: 12px;
}

/* Component list */
.newcomponentslist {
    grid-area: newcomponentslist;
}

/* Component actions */
.newcomponentsoptions {
    grid-area: newcomponentsoptions;
    display: flex;
    flex-direction: column;
}

/* ---------- OPTIONS ---------- */

.newprojectoptions {
    grid-area: newprojectoptions;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "newprojectadditionalinfo newprojectadditionalinfo newprojectadditionalinfo"
        "newprojectadditionalinfo newprojectadditionalinfo newprojectadditionalinfo"
        "- - newprojectsavebox";
    gap: 12px;
}

/* Additional info */
.newprojectadditionalinfo {
    grid-area: newprojectadditionalinfo;
    display: flex;
    flex-direction: column;
}

/* Save section */
.newprojectsavebox {
    grid-area: newprojectsavebox;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.revisioncontainer {
    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    grid-template-rows: 0.4fr 1.6fr 1fr;
    grid-template-areas:
        ". newrevisionheaderinfo ."
        ". newrevisioncomponents ."
        ". newrevisionoptions .";
    width: 80%;
    height: 80%;
    margin: auto;
    gap: 16px;
}

/* Shared card styling */
.revisioncontainer > div,
.newrevisionheaderinfo > div,
.newrevisioncomponents > div,
.newrevisionoptions > div {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ---------- HEADER ---------- */

.newrevisionheaderinfo {
    grid-area: newrevisionheaderinfo;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
        "newrevisionnameoptions newrevisionname";
    gap: 12px;
}

/* Options (left side) */
.newrevisionnameoptions {
    grid-area: newrevisionnameoptions;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Revision name (main focus) */
.newrevisionname {
    grid-area: newrevisionname;
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    font-weight: 600;
}

/* ---------- COMPONENTS ---------- */

.newrevisioncomponents {
    grid-area: newrevisioncomponents;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-areas:
        "newrcomponentslist";
    gap: 12px;
    grid-area: 2/2/2/2;
}

/* Component list */
.newrcomponentslist {
    grid-area: newrcomponentslist;

}


.newcomponentslist > div {                /* fill available height */
    overflow-y: scroll;        /* scroll INSIDE */
    height: 100%;         /* VERY IMPORTANT (fixes flex overflow bug) */
}


/* ---------- OPTIONS ---------- */

.newrevisionoptions {
    grid-area: newrevisionoptions;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        ". ."
        ". ."
        ". newrevisionsavebox";
    gap: 12px;
}

/* Save box */
.newrevisionsavebox {
    grid-area: newrevisionsavebox;
    display: flex;
    flex-direction: column;
    align-items: center;
}




.white { 
  height: 85vh;
  &:before { 
    z-index: 1000;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0vh;
    background-image: linear-gradient(-180deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%) }
  &:after { 
    z-index: 1000;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20vh;
    background-image: linear-gradient(0deg, #e2e2e2 0%, rgba(235,235,235,0.00) 100%) }}

.squares {
  height: 100%;
  display: flex;
  justify-content: space-around;
  overflow: hidden }
.square {
  animation: squares 9.5s linear infinite;
  align-self: flex-end;
  width: 1em;
  height: 1em;
  border-radius: 1em;
  transform: translateY(100%);
  background: #ebebeb;  
  &:nth-child(2) { 
    height: 1.5em;  
    width: 3em;   
    border-radius: 1em;
    animation-delay: 1s;
    animation-duration: 17s; 
    -webkit-filter: blur(5px) }
  &:nth-child(3) { 
    height: 2em;    
    width: 1em;   
    animation-delay: 1.5s;
    animation-duration: 8s; 
    -webkit-filter: blur() }
  &:nth-child(4) { 
    height: 1em;    
    width: 2em; 
    animation-delay: 0.5s;
    -webkit-filter: blur(3px);
    animation-duration: 13s }
  &:nth-child(5) { 
    height: 1em; 
    width: 2em;   
    animation-delay: 4s;
    -webkit-filter: blur(2px);
    animation-duration: 11s }
  &:nth-child(6) { 
    height: 2.5em;  
    width: 1.75em;   
    animation-delay: 2s;
    -webkit-filter: blur(1px);
    animation-duration: 19s }
  &:nth-child(7) { 
    height: 5em;    
    width: 2.5em;   
    -webkit-filter: blur(2.5px);
    animation-duration: 12s }
  &:nth-child(8) { 
    height: 1.5em;    
    width: 3em;   
    animation-delay: 5s;
    -webkit-filter: blur(6px);
    animation-duration: 18s }
  &:nth-child(9) {
    height: 1em; 
    width: 2em; 
    -webkit-filter: blur(0.5px);
    animation-duration: 9s }
  &:nth-child(9) {
    height: 5em;
    width: 2.4em;
    animation-delay: 6s;
    -webkit-filter: blur(0.5px);
    animation-duration: 12s }}

@keyframes squares { 
  from { transform: translateY(100%) rotate(-50deg) }
  to   { transform: translateY(calc(-100vh + -100%)) rotate(40deg) }}


  .newcontainer {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "resultsmodifier resultstable resultstable"
        "resultsmodifier resultstable resultstable"
        "resultsmodifier resultstable resultstable";
    width: 80%;
    height: 80%;
    margin: auto;
    gap: 16px;
}

/* Shared panel styling */
.newcontainer > div,
.resultsmodifier > div,
.resultsmodifieroptions > div {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ---------- RESULTS TABLE ---------- */

.resultstable {
    grid-area: resultstable;
    overflow: auto;
    background-color: #fafafa;
    border: 1px solid #e5e7eb;
}

/* ---------- LEFT PANEL ---------- */

.resultsmodifier {
    grid-area: resultsmodifier;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "resultsmodifierhead"
        "resultsmodifieroptions";
    gap: 12px;
}

/* Header */
.resultsmodifierhead {
    grid-area: resultsmodifierhead;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* Options container */
.resultsmodifieroptions {
    grid-area: resultsmodifieroptions;
    flex-direction: column;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    overflow-y: auto;
    min-height: 0; /* ✅ prevents overflow bugs */
    grid-template-areas:
        "resultsmodifieroptionsclass"
        "resultsmodifieroptionsatt1"
        "resultsmodifieroptionsatt2"
        "resultsmodifieroptionsatt3"
        "resultsmodifieroptionsatt4";
}

/* Individual option rows */


/* Optional: make inputs nicer */
.resultsmodifieroptions input,
.resultsmodifieroptions select {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

/* Individual sections (kept for compatibility) */
.resultsmodifieroptionsclass { 
    grid-area: resultsmodifieroptionsclass;
 }
.resultsmodifieroptionsatt1 {
    grid-area: resultsmodifieroptionsatt1;
 }
.resultsmodifieroptionsatt2 { 
    grid-area: resultsmodifieroptionsatt2;
 }
.resultsmodifieroptionsatt3 { 
    grid-area: resultsmodifieroptionsatt3;
 }
.resultsmodifieroptionsatt4 { 
    grid-area: resultsmodifieroptionsatt4;
 }

 
.containerusers {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 0.1fr 4fr 0.1fr;
    grid-template-rows: 0.4fr 2.2fr 0.4fr;
    grid-template-areas:
        ". usersheader ."
        ". userlist ."
        ". submitusers .";

    width: 80%;
    height: 80%;
    margin: auto;
    gap: 16px;
}

/* Shared card styling */
.containerusers > div {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Header */
.containerusers .title {
    grid-area: usersheader;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 1.5rem;
    font-weight: 600;
}

/* User List */
.containerusers .userlist {
    grid-area: userlist;

    overflow-y: auto;

    background-color: #fafafa;
    border: 1px solid #e5e7eb;
}

.submitusers {
    grid-area: submitusers;
    text-align: center;
}

/* If the user list contains rows */
.containerusers .userlist .user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px;
    margin-bottom: 8px;

    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;

    transition: all 0.15s ease;
}